<!--
 * @Description: 歌单或者专辑单个组件
 * @Author: 56208
 * @Date: 2025/4/19 17:26
 * @LastEditors: 56208
 * @LastEditTime: 2025/4/19 17:26
 * @FilePath: D:/vue3-electron-music/src/renderer/src/components/singAlbum\index.vue
 -->

<template>
  <div class="d-flex flex-d-col">
    <div class="w-184 h-184 p-0 d-al-jt p-re album-container rounded-8">
      <img
        src="@renderer/assets/picture/touxiang.svg"
        class="bg-img"
        height="184"
        width="184"
        alt=""
      />
      <img src="@renderer/assets/icon/play.svg" height="60" width="60" class="icon-class" alt="" />
    </div>
    <div class="mt-8 text-18 text-ellipsis">猜你喜欢</div>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">
.album-container {
  background-color: transparent;
  .bg-img {
    transition: filter 0.3s ease;
  }
  .icon-class {
    position: absolute;
    opacity: 0;
    transform: scale(0.8);
  }
  &:hover {
    .bg-img {
      filter: brightness(0.6);
    }
    .overlay {
      opacity: 1;
    }
    .icon-class {
      transform: scale(1);
      opacity: 1;
      transition: all 0.3s ease;
      cursor: pointer;
    }
  }
}
</style>
